<h3>修改该服务的相应信息，点击“保存”按钮保存修改。</h3>
<div id="buttons">
	 <div id="save_this_layout" class="left">保存</div>
	 <div id="del_this_file" class="left">删除</div>
</div>

<div id="product_class_detail_left" class="left">
	<!--顶级目录-->
	<ul id="product_class_dir_list">
		 <?php
		 foreach( $top_dir_map as $index=>$dir_info ){	 
		 ?>
			 <li class="dir">
				 <a href="javascript:void(0);" 
					 rel="<?php echo "{$dir_info['relative_path']}/{$dir_info['name']}"; ?>"><?php echo $dir_info['name']; ?></a>
			 </li>
		 <?php
		 }
		 ?>
	</ul>
	<!--子目录-->
	<ul id="product_class_file_list">
		 <li class="file"><a href="#">没有文件还</a></li>
	</ul>
</div>

<div id="product_class_detail_right" class="left">
<textarea id="file_content" name=""></textarea>
</div>

<!--弹出的对话框-->
<div id="dialog_message"></div>
<div id="dialog_form" style="display:none;">
<form>
	<fieldset>
		<p>
		 	<label for="name">文件名</label><br />
		 	<input type="text" name="name" id="name" class="text"/>
		</p>
		<p>
		 	<label for="content">文件内容</label><br />
		 	<textarea name="content" id="content" class="text"></textarea>
		</p>
	</fieldset>
</form>
</div>

<script type="text/javascript">
(function(){
	var dialog_message_el = $( "#dialog_message" ) ,
		 save_this_layout_el = $( "#save_this_layout" ) ,
		 del_this_file = $( "#del_this_file" ) ,
		 file_content_el = $( '#file_content' );

	del_this_file.hide();
	save_this_layout_el.button();
	//使能 class 为 dir 的 li 在点击之后显示相应的
	//目录中包含的文件信息 
	$( '.dir' ).each( function( index , el ){
		var this_el = $( el );
		this_el.click( function(){
			del_this_file.hide();
			del_this_file.button( 'destroy' );
			var this_dir_path = this_el.find( 'a' ).attr( 'rel' );	
			//得到这个目录的文件列表
			$.get( "/admin/ajax_get_dir_map/" , "dir_path=" + this_dir_path , 
				function( res ){
					//取消其他元素的高亮
					$( '.dir' ).each( function( index , el ){
						$( el ).find( 'a' ).removeClass( 'active' );
					});
					//高亮本元素
					this_el.find( 'a' ).addClass( 'active' );
					var file_list_li = '';
					for( var file_name in res ){
						file_list_li += '<li class="file"><a href="javascript:void(0);" rel="' + 
							res[file_name]['relative_path'] + '/' + file_name + '">' + 
							file_name + '</a></li>';
					}
					//显示添加新文件的按钮
					//但是 base_index 文件夹不能显示
					if( file_name != 'base_index_detail_product_item' ){
						file_list_li += '<li><a href="javascript:void(0);" id="add_new_file_button">添加一个新的文件</a></li>';
					}
					//更新右侧文件列表
					$( '#product_class_file_list' ).html( file_list_li );
					//使能添加文件按钮
					$( '#add_new_file_button' ).click( function(){
						 $( "#dialog_form" ).dialog({
							 autoOpen: true ,
							 height: 550 ,
							 width: 510 ,
							 modal: true ,
							 buttons: {
								"添加一个新的文件": function() {
									 var name = $( "#name" ),
										 content = $( "#content" ) ,
										 allFields = $( [] ).add( name ).add( content );
									 //找到当前 dir 中的高亮元素 
									 //获得文件应该写入的文件夹路径
									 var file_path = $( '.dir' ).find( '.active' ).attr( 'rel' );
									 //写入服务器中
									 $.post( "/admin/ajax_do_add_new_file/" , 
										 "name=" + name.val() + 
										 "&&content=" + content.val() + 
										 "&&file_path=" + file_path , 
										 function( res ){
                                                                                        update_priv_err_tips( res );
                                                                                        if( res.res == "TRUE" ){
                                                                                                dialog_message_el.text( '添加文件成功.' );
                                                                                        }else{
                                                                                        dialog_message_el.text( '添加文件失败，请检查文件夹是否有写权限，以及您是否有足够的权限执行该操作.' );
                                                                                        }
                                                                                        dialog_message_el.dialog({
                                                                                                modal: true,
                                                                                                        buttons: {
                                                                                                                "确认": function(){
                                                                                                                        $( this ).dialog( "close" );
                                                                                                                }
                                                                                                        }
                                                                                        });
                                                                                        if( res.res == "TRUE" ){
                                                                                                //更新文件列表
                                                                                                this_el.click();
                                                                                        }
                                                                                 } , "json" 
                                                                                 );
                                                                        },
                                                                        '取消': function(){
                                                                                $( this ).dialog( "close" );
                                                                        }
                                                                },
                                                                close: function(){
                                                                        allFields.val( "" ).removeClass( "ui-state-error" );
                                                                }
                                                 });
                                        }); 
                                        //使能点击显示文件内容
                                        $( '.file' ).each( function( index , el ){
                                                var this_el = $( el );
                                                var this_file_path = this_el.find( 'a' ).attr( 'rel' );	
                                                this_el.click( function(){
                                                        del_this_file.show();
                                                        del_this_file.button();
                                                        del_this_file.unbind();
                                                        del_this_file.click( function(){
                                                                //传递文件信息给服务器端
                                                                //尝试删除该文件
                                                                $.post( '/admin/ajax_do_del_file/' , "file_path=" + this_file_path , 
                                                                        function( res ){
                                                                                update_priv_err_tips( res );
                                                                                if( res.res == "TRUE" ){
                                                                                        dialog_message_el.text( '删除文件成功.' );
                                                                                }else{
					                                                dialog_message_el.text( '添加文件失败，请检查文件夹是否有写权限，以及您是否有足够的权限执行该操作.' );
                                                                                }
                                                                                dialog_message_el.dialog({
                                                                                        modal: true,
                                                                                                buttons: {
                                                                                                        ok: function() {
                                                                                                                $( this ).dialog( "close" );
                                                                                                        }
                                                                                                }
                                                                                });
                                                                        } ,
                                                                                "json" 	 
                                                                        );
                                                        });
                                                        $.get( '/admin/ajax_get_file_content/' , "file_path=" + this_file_path , 
                                                                function( res ){
                                                                        //取消其他元素的高亮
                                                                        $( '.file' ).each( function( index , el ){
                                                                                $( el ).find( 'a' ).removeClass( 'active' );
                                                                        });
                                                                        //高亮本元素
                                                                        this_el.find( 'a' ).addClass( 'active' );
                                                                        if( res != '' ){
                                                                                file_content_el.val( res );
                                                                                //更新 name 属性 传递文件名
                                                                                file_content_el.attr( 'name' , this_file_path );
                                                                        }
                                                                }
                                                        );
                                                });
                                        });
                                } ,
                                        "json"		
                                );
                });
        });
	//使能保存功能
	save_this_layout_el.click( function(){ 
		var file_content = file_content_el.val();
		var this_file_path = file_content_el.attr( 'name' );
		$.post( '/admin/ajax_do_update_file_content' , "file_content=" + file_content + "&&this_file_path=" + this_file_path ,
                        function( res ){
                                update_priv_err_tips( res );
				if( res.res == "TRUE" ){
					 dialog_message_el.text( '修改文件成功.' );
				}else{
					 dialog_message_el.text( '添加文件失败，请检查文件夹是否有写权限，以及您是否有足够的权限执行该操作.' );
				}
				dialog_message_el.dialog({
					 modal: true,
					 buttons: {
						 "确认": function() {
							 $( this ).dialog( "close" );
						 }
					 }
				 });
			} ,
			"json"
		);
	});
})(); 
</script>
